<template>
    <h1>用户登录</h1>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
        <van-field
                v-model="form.username"
                name="用户名"
                label="用户名"
                placeholder="请填写用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
                v-model="form.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="请填写密码"
                :rules="[{ required: true, message: '请填写密码' }]"
        />
        </van-cell-group>
        <div class="btn">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup>
    import { reactive, getCurrentInstance } from 'vue';
    import { showNotify } from 'vant';
    import { useRouter, useRoute} from 'vue-router'
    const router = useRouter();
    const route= useRoute();
    // 获取当前vue实例
    const { proxy } = getCurrentInstance();
    // 表单数据
    const form = reactive({
        username: '',
        password:'',
    });

    // 表单提交
    const onSubmit = async () => {
        const { data } = await proxy.$api.login(form);
        console.log('data',data);
        if (data.code === 0){
            showNotify({ type: 'primary', message: '登录成功' });
            // 缓存token
            localStorage.setItem('h5_token',data.data);
            // 存储用户信息
            // localStorage.setItem('userInfo',JSON.stringify(xxx));
            // 路由跳转到首页
            router.push('/home');
        } else {
            showNotify({ type: 'danger', message: data.msg });
        }
    }
</script>

<style lang="less" scoped>
h1 {
    text-align: center;
}
.btn{
    margin: 16px;
}
</style>